<template>
  <view class="container">

    <view class="avatar">
      <span>微信头像：</span>
      <!-- 上传组件 -->
      <u-upload ref="product_img" name="product_img" :maxCount="1" :fileList="filelist" width="100" height="100" />
    </view>

    <view class="content">
      <u-form labelPosition="left" labelWidth="60" :model="strplist" ref="product">
        <!-- 部门 -->
        <u-form-item label="店名" prop="store" borderBottom>
          <u-input v-model="strplist.storename" placeholder="意向门店名称为空"></u-input>
        </u-form-item>
        <u-form-item label="申请单号" prop="code">
          <u-input v-model="strplist.code" placeholder="申请单号为空" />
        </u-form-item>
        <!-- 名称 -->
        <u-form-item label="微信昵称" prop="nickname">
          <u-input v-model="strplist.nickname" placeholder="请输入客户昵称" />
        </u-form-item>

        <u-form-item label="电话">
          <u-input v-model="strplist.mobile" placeholder="请输入客户电话" />
          <u-button slot="right" :customStyle="{
        width: '40px',
        height: '35px',
        marginLeft: '3px',
      }" @tap="getbusinessPhone" :text="tips" type="success" :plain="true" size="mini"></u-button>
        </u-form-item>
        <u-form-item label="申请时间">
          <u-input v-model="strplist.createtime_text" placeholder="申请时间" />
        </u-form-item>

        <u-form-item label="申请原因" prop="description" borderBottom>
          <u-textarea placeholder="不低于3个字" v-model="strplist.content" count></u-textarea>
        </u-form-item>


        <!-- 全款 -->
        <u-form-item label="身份证" prop="sfz">
          <u-input v-model="strplist.idcard" placeholder="身份证为空" />
        </u-form-item>



        <view class="avatar">
          <!-- 上传组件 -->
          <span>身份证正反面：</span>
          <u-upload ref="product_img" name="product_img" :maxCount="2" :fileList="filelist1" width="120" height="120"
            @delete="del1" @afterRead="read1" />
        </view>







        <!-- 提交按钮 -->
        <u-button text="创门店" icon="pushpin" size="small" type="primary" :customStyle="btnStyle" @click="product" />


      </u-form>
    </view>



    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.supid = options.supid ? options.supid : 0;
    this.busid = options.busid ? options.busid : 0

    this.auth = this.$u.auth.check()
    this.watchinfo()

  },


  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      busid: 0,

      piclist: [],
      filelist: [],
      filelist1: [],
      supid: "",
      stolist: [],
      product_img: "",
      strplist: {},
      auth: {},
      tips: "拨打",
      // rules: {
      //   "nickname": {
      //     required: true,
      //     message: "申请人微信名称不能为空",
      //     trigger: ["blur", "change"],
      //   },
      //   "store": {
      //     required: true,
      //     message: "门店预想名称不能为空",
      //     trigger: ["blur", "change"],
      //   },
      //   "mobile": {
      //     required: true,
      //     message: "申请人手机号不能为空",
      //     trigger: ["blur", "change"],
      //   },
      //   "idcard": {
      //     required: true,
      //     message: "身份证号不能为空",
      //     trigger: ["blur", "change"],
      //   },
      //   "content": {
      //     required: true,
      //     message: "申请理由不能为空",
      //     trigger: ["blur", "change"],
      //   },
      //   "code": {
      //     required: true,
      //     message: "申请单号不能为空",
      //     trigger: ["blur", "change"],
      //   },
      // },
    };
  },

  methods: {

    getbusinessPhone() {
      wx.makePhoneCall({
        phoneNumber: this.strplist.mobile, //仅为示例，并非真实的电话号码
      });
    },

    del(e) {
      let list = this.filelist.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist.splice(e.index, index);
          let data = {
            supid: this.supid,
            product_img: e.file.url,
          };
          var result = await this.$u.api.product.delthumb(data);

          if (result.code) {
            this.filelist.splice(e.index, e.index);

            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 2000,
              complete: () => {
                this.watchinfo()
                // 图片还剩余一张的时候清空
                if ((e.index = 0 || index == 0)) {
                  this.filelist = [];
                }
              },
            });
            return false;
          }
        }
      });
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist = this.filelist.concat({ url: result.data });

        let userArray = Object.entries(this.filelist).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 把想要的路径追加到数组
          this.piclist.push(item.value.url);
        });

        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.strplist.bodythumbs = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },

    async watchinfo() {
      let data = {
        adminid: this.auth.id,
        supid: this.supid,
        busid: this.busid
      };

      let result = await this.$u.api.depot.ShenpiInfo(data);
      {
        if (result.code) {
          this.strplist = result.data;

          if (this.strplist.avatar) {
            this.filelist = [
              { url: this.strplist.avatar }

            ]
          }

          if (this.strplist.thumbs_text) {
            this.filelist1 = this.strplist.thumbs_text.map((item) => {
              return {
                url: item
              }
            })
          }


        } else {
          this.$refs.notice.show({
            type: "warning",
            message: result.msg,
            duration: 1200,
            complete: () => {
              uni.$u.route({
                type: "navigateBack",
                delta: 1,
              });

              return false;
            },
          });
        }
      }
    },
    product() {

      uni.$u.route({
        url: "pagesC/store/add",
        params: {
          supid: this.strplist.id
        }
      })


    },
    // async product() {

    //       let data = {
    //         id: this.strplist.id,
    //         adminid: this.auth.id,
    //         busid: this.busid,
    //         supid: this.supid,
    //         stoid: this.strplist.product.stoid,



    //       };


    //       let result = await this.$u.api.depot.shenpiconfirm(data);

    //       if (result.code) {
    //         this.$refs.notice.show({
    //           type: "success",
    //           message: result.msg,
    //           duration: 1000,
    //           complete: () => {
    //             //返回上一个界面
    //             uni.$u.route({
    //               type: "redirectTo",
    //               url: "/pagesC/shenpi/index",

    //             });
    //           },
    //         });
    //       } else {
    //         this.$refs.notice.show({
    //           type: "danger",
    //           message: result.msg,
    //           duration: 2000,
    //         });
    //       }

    // },

    // 拨打电话
    getPhone() {
      wx.makePhoneCall({
        phoneNumber: this.strplist.supplier.mobile, //仅为示例，并非真实的电话号码
      });
    }

  },
};
</script>

<style>
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

/* .u-form-item__body__left__content__label.data-v-5e7216f1 {
	width: 75px;
} */

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.branktypename {
  text-align: center;
}
</style>